<template>
  <div class="collapse">
    <el-collapse accordion v-model="activeName">
      <div v-for="item in category_left" :key="item">
        <el-collapse-item :name="item.name">
          <template #title>
            <Component :is="item.icon" class="header-icon"/>
            {{ item.title }}
          </template>
          <div @click="reload(items)" v-for="items in item.msg" :key="item.msg.id" class="qwe">
            <div style="width: 70%;float: left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">
              {{ items.unitChnName }}
            </div>
            <div style="float: right;margin-right: 5px">
              ({{ items.versionNum }})
            </div>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
  </div>
  <div class="category">
    <div style="border: 1px solid #ededed;margin-bottom: 5px">
      <div class="category_top">
        <div class="category_top_title">
          共有
          <span style="color: #4a9cfb;">
          {{ mdItemTotal }}
        </span>
          个数据目录
          <el-button type="primary" style="float: right;margin-top: 9px">
            目录下载
            <el-icon class="el-icon--right">
              <Download/>
            </el-icon>
          </el-button>
        </div>
        <div class="category_top_theme">
          <span>领域筛选：</span>
          <ul style="width: 85%">
            <li v-for="(item, index) in theme" :key="index" @click="selectedThemeItem(item,index)"
                :class="{active : index === selectedTheme}">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="category_top_format">
          <span>格式筛选：</span>
          <ul style="width: 85%">
            <li v-for="(item, index) in format" :key="index" @click="selectedFormatItem(item,index)"
                :class="{active : index === selectedFormat}">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="category_top_format">
          <span>开放类型：</span>
          <ul style="width: 85%">
            <li v-for="(item, index) in openType" :key="index" @click="selectedOpenItem(item,index)"
                :class="{active : index === selectedOpen}">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="selected">
          <span>已选条件：</span>
          <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              class="selected_tag"
              round
              closable
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
      <div class="category_center">
        <div class="search-content">
          <el-input placeholder="请搜索数据目录名称" style="width: 428px" v-model="resTitle">
            <template #append>
              <el-button @click="searchTitle" :icon="Search"/>
            </template>
          </el-input>
        </div>
        <span>
          更新时间
          <component
              :is="ArrowDown"
              class="icon_sort"
          />
        </span>
        <span>
          数据量
          <component
              :is="ArrowDown"
              class="icon_sort"
          />
        </span>
        <span>
          访问量
          <component
              :is="ArrowDown"
              class="icon_sort"
          />
        </span>
        <span>
          下载量
          <component
              :is="ArrowDown"
              class="icon_sort"
          />
        </span>
        <span>
          评分
          <component
              :is="ArrowDown"
              class="icon_sort"
          />
      </span>
      </div>
    </div>
    <div class="category_bottom">
      <ul>
        <li
            v-for="(item, index) in mdItem"
            :key="index"
        >
          <div class="category_bottom_title">
            <router-link to="list_check_detail" @click="saveDate(item)">{{ item.resTitle }}</router-link>
            <div class="collect">
              <el-icon color="#fea859" size="20">
                <StarFilled/>
              </el-icon>
              <span>收藏</span>
            </div>
            <div class="share">
              <el-icon color="#6cdb9a" size="20">
                <Share/>
              </el-icon>
              <span>分享</span>
            </div>
          </div>
          <div class="describe">描述：{{ item.describtion }}</div>
          <div class="category_bottom_info">
            <div class="information">
              <span>来源部门：</span>
              <span class="blue depart">{{ item.mdContact }}</span>
            </div>
            <div class="information">
              <span>重点领域：</span>
              <span class="blue education">{{ item.resCateInfos.cateName }}</span>
            </div>
            <div class="information">
              <span>发布时间：</span>
              <span class="blue time">{{ item.pubDate.slice(0, 10) }}</span>
            </div>
            <div class="information">
              <span>更新时间：</span>
              <span class="blue time">{{ item.mdDateUpd.slice(0, 10) }}</span>
            </div>
            <div class="information">
              <span>开放条件：</span>
              <span class="blue">{{ item.openConditionsID }}</span>
            </div>
          </div>
          <div class="other">
            <div style="width: 172px;float: left;position: relative;top: 4px">
              数据量：
              <span class="blue">{{ item.dataVolume }}</span>
            </div>
            <div style="width: 160px;float: left;">
              评分
              <el-rate
                  v-model="item.score"
                  disabled
                  text-color="#ff9900"
              />
            </div>
            <div style="width: 300px;float: left">
              <el-tag
                  v-for="(tag,index) in item.format.split(',')"
                  :key="index"
                  effect="dark"
                  size="small"
                  style="margin-right: 5px"
              >{{ tag }}
              </el-tag>
            </div>
            <div class="visit_number">
              <el-icon class="icon">
                <View/>
              </el-icon>
              {{ item.visits }}次
            </div>
            <div class="download_number">
              <el-icon class="icon">
                <Download/>
              </el-icon>
              {{ item.download }}次
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="category_page">
      <el-pagination
          style="margin-left: 190px"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :background="true"
          layout="prev, pager, next, jumper"
          :total="mdItemTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {House, LocationInformation, SetUp, Download, Search, ArrowDown, StarFilled, View} from '@element-plus/icons-vue'
import {ref, onMounted} from 'vue'
import axios from "axios";
import useMdStore from '@/stores/useMetaData'

const store = useMdStore()
const resTitle = ref('')
const searchTitle = () => {
  load()
}
onMounted(() => {
  load();
  loadleft();
})
const activeName = ref('1')
const category_left = [
  {
    name: 2,
    icon: LocationInformation,
    title: '地市',
    msg: []
  },
  {
    name: 3,
    icon: SetUp,
    title: '综合得分',
    msg: []
  }
]
const saveDate = (e: any) => {
  store.setDate(e)
}
const currentPage = ref(5)
const pageSize = ref(10)

const reload = (e: any) => {
  //将点击的部门传回函数
  console.log(e)
}
const theme = ref(['全部', '教育', '民政','卫生', '公安', '社保就业',  '卫生健康', '公安', '教育']);
const format = ref(['全部', 'xls', 'xml', 'json', 'csv', 'rdf', '接口', '链接', '其他'])
const openType = ref(['全部', '有条件开放', '无条件开放'])
const selectedTheme = ref(0);
const selectedFormat = ref(0);
const selectedOpen = ref(0);
const mdItem = ref([])
const mdItemTotal = ref(0)

function selectedThemeItem(e: string, index: number) {
  const i = dynamicTags.value.indexOf(theme.value[selectedTheme.value])
  if (i != -1) {
    dynamicTags.value.splice(i, 1)
  }
  if (index == 0) {
    cate1.value = ''
    load()
  } else cate1.value = index
  selectedTheme.value = index;
  if (selectedTheme.value != 0) {
    handleNewTag(e);
  }
}

function selectedFormatItem(e: string, index: number) {
  const i = dynamicTags.value.indexOf(format.value[selectedFormat.value])
  if (i != -1) {
    dynamicTags.value.splice(i, 1)
  }
  if (index == 0) {
    cate2.value = ''
    load()
  } else cate2.value = e
  selectedFormat.value = index;
  if (selectedFormat.value != 0) {
    handleNewTag(e)
  }
}

function selectedOpenItem(e: string, index: number) {
  const i = dynamicTags.value.indexOf(openType.value[selectedOpen.value])
  if (i != -1) {
    dynamicTags.value.splice(i, 1)
  }
  selectedOpen.value = index;
  if (index == 0) {
    cate3.value = ''
    load()
  } else cate3.value = e
  if (selectedOpen.value != 0) {
    handleNewTag(e)
  }
}

const cate1 = ref()
const cate2 = ref('')
const cate3 = ref('')
const dynamicTags = ref(['全部'])
const handleClose = (tag: string) => {
  if (tag == cate1.value) {
    cate1.value = ''
    selectedTheme.value = 0
  } else if (tag == cate2.value) {
    cate2.value = ''
    selectedFormat.value = 0
  } else if (tag == cate3.value) {
    cate3.value = ''
    selectedOpen.value = 0
  }
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
  load()
}
const handleNewTag = (name: string) => {
  dynamicTags.value.push(name)
  load()
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const resInfo = ref([])
const load = () => {
  axios.get('http://localhost:8081/resCateInfo').then(
      res => {
        resInfo.value = res.data.data
      }
  ).catch(e => {
    console.log(e)
  })
  axios.get('http://localhost:8081/infoResMdInfo/page', {
    params: {
      pageNum: 1,
      pageSize: 10,
      resTitle: resTitle.value,
      FocusAreasID: cate1.value,
      Format: cate2.value,
      OpenConditionsID: cate3.value
    }
  })
      .then(
          res => {
            if (res.data.data.records) {
              res.data.data.records.forEach((item: {}) => {
                if (item.openConditionsID) {
                  item.openConditionsID = "无条件开放"
                } else item.openConditionsID = "有条件开放"
              })
            }
            mdItem.value = res.data.data.records
            mdItemTotal.value = parseInt(res.data.data.total)
            mdItem.value.forEach((item: any) => {
              const info: any = {}
              console.log(item)
              resInfo.value.forEach((item2: any) => {
                if (item2.tpCat == item.tpCat) {
                  info.value = item2
                  console.log(info.value)
                }
              })
              item.resCateInfos = info.value
            })
          }
      ).catch(e => {
    console.log(e)
  })
}
const loadleft = () => {
  axios.get('http://localhost:8081/infoResMdInfo/menu').then(
      res => {
        category_left[0].msg = res.data.data
        console.log(category_left)
      }
  )
}


</script>

<style scoped>
.collapse {
  width: 20%;
  float: left;

}

.header-icon {
  margin-left: 5px;
  margin-right: 5px;
  height: 20px;
}

:deep(.el-collapse-item__header.is-active) {
  background-color: #1b8ef8;
  color: white;
}

:deep(.el-collapse-item__header) {
  font-size: medium;
}

:deep(.el-collapse-item__content) {
  margin-top: 5px;
  border-top: 1px #eeeced solid;
  border-left: 1px #eeeced solid;
  border-right: 1px #eeeced solid;
  padding-bottom: 0px;
  font-size: medium;
}

:deep(.el-collapse-item__content div) {
  border-bottom: 1px #eeeced solid;
}

:deep(.el-collapse-item__content :hover) {
  background-color: #1b8ef8;
}

.qwe {
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
}

.category {
  width: 78%;
  float: left;
  position: relative;
  margin-left: 10px;
}

.category_top {
  position: relative;
  width: 100%;
  padding: 0 15px 6px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.category_top_title {
  line-height: 50px;
  font-size: large;
  height: 50px;
  border-bottom: 1px solid #ededed;
}

.category_top_title::after {
  display: block;
  content: '';
  position: absolute;
  left: 15px;
  top: 49px;
  height: 2px;
  width: 125px;
  background-color: #1b8ef8;
}

.category_top_theme {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ededed;
  padding-left: 10px;
}

.category_top_theme span {
  float: left;
  color: #4a8ef9;
  line-height: 50px;
  margin-left: 5px;
}

.category_top_theme ul {
  display: inline-block;
  list-style: none;
}

.category_top_theme ul li {
  display: inline-block;
  vertical-align: middle;
  margin: 12px 0 0;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  cursor: pointer;
  text-align: center;
}

.category_top_format {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ededed;
  padding-left: 10px;
}

.category_top_format span {
  float: left;
  color: #4a8ef9;
  line-height: 50px;
  margin-left: 5px;
}

.category_top_format ul {
  display: inline-block;
  list-style: none;
}

.category_top_format ul li {
  display: inline-block;
  vertical-align: middle;
  margin: 12px 0 0;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  cursor: pointer;
  text-align: center;
}

.category_top li.active {
  background: #4a8ef9;
  color: #fff;
}

.selected {
  width: 100%;
  background: rgba(238, 246, 255, .85);
  overflow: hidden;
}

.selected span {
  float: left;
  color: #4a8ef9;
  line-height: 35px;
  margin-left: 15px;
}

:deep(.selected_tag) {
  background-color: #04c4ef;
}

:deep(.el-tag__content) {
  color: #fff;
}

:deep(.el-tag) {
  --el-tag-font-size: 15px;
}

.selected_tag {
  float: left;
  margin-left: 15px;
  margin-top: 4.5px;
  padding: 0 10px;
  height: 26px;
}

:deep(.el-tag .el-tag__close) {
  color: white;
}

.category_center {
  width: 100%;
  height: 50px;
}

.search-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 40px 0 24px;
}

.category_center span {
  line-height: 50px;
  margin-top: 4.5px;
  font-size: 16px;
  margin-left: 20px;
}

.icon_sort {
  height: 12px;
}

.category_bottom ul {
  list-style: none;
}

.category_bottom ul li {
  background: #fff;
  position: relative;
  padding: 10px 30px 10px 25px;
  border: 1px solid #f5f5f5;
  transition: box-shadow .5s;
}

.category_bottom ul li .category_bottom_title {
  position: relative;
  z-index: 2;
  height: 35px;
}

.category_bottom ul li .category_bottom_title a {
  width: 500px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 18px;
  line-height: 35px;
  color: #1B8EF8;
  transition: .5s;
  display: inline-block;
}

.collect {
  float: right;
  cursor: pointer;
  margin: 8px 0 0 20px;
}

.category_bottom_title span {
  position: relative;
  top: -4px;
}

.category_bottom_title i {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.share {
  position: relative;
  float: right;
  cursor: pointer;
  margin-top: 8px;
}

.describe {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.category_bottom_info {
  margin-top: 12px;
  overflow: hidden;
  height: 40px;
  font-size: 14px;
}

.category_bottom_info .information {
  height: 20px;
  float: left;
  margin-right: 18px;
}

.category_bottom_info .information span {
  display: inline-block;
  vertical-align: middle;
}

.blue {
  color: #0083FF;
}

.category_bottom_info .information .depart {
  min-width: 80px;
  max-width: 135px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.category_bottom_info .information .education {
  min-width: 70px;
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.category_bottom_info .information .time {
  width: 85px;
}

.other {
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

:deep(.el-rate) {
  height: 14px;
  position: relative;
  top: 2px;

}

.visit_number {
  float: right;
  padding-left: 25px;
  height: 20px;
  line-height: 20px;
  color: #999;
}

.download_number {
  float: right;
  padding-left: 25px;
  height: 20px;
  line-height: 20px;
  color: #999;
  margin-right: 15px;
}

.other .icon {
  position: relative;
  top: 2px;
}

.category_page {
  margin-top: 20px;
}
</style>